<template>
    <div :class="mclass">
        <el-form-item :label="label || '图标'">
            <el-col :span="3">
                <el-tooltip class="item" effect="dark" content="图标图片" placement="top">
                    <file-picker v-model="icon.img" theme="mini"></file-picker>
                </el-tooltip>
            </el-col>
            <el-col :span="3">
                <el-tooltip class="item" effect="dark" content="图标字体" placement="top">
                    <icon-picker v-model="icon.icon"
                                   size="mini"></icon-picker>
                </el-tooltip>
            </el-col>
            <!--<el-col class="line" :span="1">&nbsp;</el-col>-->
            <!--<el-col :span="3">
                <el-tooltip class="item" effect="dark" content="图标颜色" placement="top">
                    <el-color-picker v-model="icon.color"
                                     size="small" show-alpha></el-color-picker>
                </el-tooltip>
            </el-col>-->
            <el-col :span="12" class="tip-txt">图片优先图标</el-col>
        </el-form-item>
        <!--<el-form-item label="颜色">
            <el-tooltip class="item" effect="dark" content="图标颜色" placement="top">
                <el-color-picker v-model="icon.color"
                                 size="small" show-alpha></el-color-picker>
            </el-tooltip>
        </el-form-item>-->
    </div>
</template>

<script type="text/javascript">
    import cBorder from './border';
    import cBg from './bg';

    export default {
        props: [ 'icon', 'label', 'mclass', 'collapsed'],
        data () {
            return {
                collapse: false
            }
        },
        mounted () {
            this.collapse = this.collapsed;
        },
        components: {
            cBorder,
            cBg,
        },
        watch: {
            'icon.show'(val) {
                if(val) {
                    this.collapse = false;
                }
            }
        },
        methods: {
            collapseChange() {
                this.collapse = !this.collapse;
            }
        }
    }
</script>
<style scoped>

</style>
